<template>
  <main class="wss-container">
    <ComTabs
      @EventSelectTab="currentSelect"
      activeName="content"
      :tabList="tabList"
    ></ComTabs>
    <div class="label-box-content">
      <!-- <NewCard
        :border="false"
        :isright="true"
        :style="{ 'margin-bottom': padding }"
        title="内容定价"
      >
        <template #right>
          <ComForm
            @EventReset="reset"
            :list="comForm"
            @EventOnsubmit="inquireFn"
          ></ComForm>
        </template>
      </NewCard> -->

      <div class="content-box">
        <el-row :gutter="30">
          <el-col :span="18">
            <NewCard
              :title="currentTitile"
              class="table"
              :border="false"
              :isright="true"
              :style="{ 'margin-bottom': padding }"
            >
              <template #right>
                <!-- <ComForm
                  @EventReset="reset"
                  :list="comForm"
                  @EventOnsubmit="inquireFn"
                ></ComForm> -->
              </template>
              <div>
                <ComTable
                  @EventRowClick="RowClickFn"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange"
                  :pagination="{
                    total: pageing.total,
                    pageNum: pageing.pageNum,
                    pageSize: pageing.pageSize,
                  }"
                  :list="tableList"
                  :modes="tableModes"
                >
                </ComTable>
              </div>
            </NewCard>
          </el-col>
          <el-col :span="6">
            <NewCard title="修改" class="edit-box">
              <div>
                <el-form
                  ref="form"
                  v-if="currentType == 'content'"
                  :model="editForm"
                  :rules="rules"
                >
                  <el-form-item
                    label="定价类型"
                    :label-width="formLabelWidth"
                    prop="pricType"
                  >
                    <el-input v-model="editForm.type" disabled></el-input>
                  </el-form-item>
                  <el-form-item
                    label="常数（元）"
                    :label-width="formLabelWidth"
                    prop="base"
                  >
                    <el-input
                      v-model="editForm.base"
                      autocomplete="off"
                      placeholder="请输入常数价格"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="交付拨比（%）"
                    :label-width="formLabelWidth"
                    prop="expertCommission"
                  >
                    <el-input
                      v-model="editForm.expertCommission"
                      autocomplete="off"
                      placeholder="请输入百分比"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="商务拨比（%）"
                    :label-width="formLabelWidth"
                    prop="cmCommission"
                  >
                    <el-input
                      v-model="editForm.cmCommission"
                      autocomplete="off"
                      placeholder="请输入百分比"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="分享拨比（%）"
                    :label-width="formLabelWidth"
                    prop="shareCommission"
                  >
                    <el-input
                      v-model="editForm.shareCommission"
                      autocomplete="off"
                      placeholder="请输入百分比"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <div>
                      <el-button size="mini" @click="reset">重设</el-button>
                      <el-button
                        size="mini"
                        :disabled="editForm.type == '' ? true : false"
                        type="primary"
                        @click="comfirmEdit"
                        >确 定</el-button
                      >
                    </div>
                  </el-form-item>
                </el-form>
                <el-form ref="form" v-else :model="editForm" :rules="rules">
                  <el-form-item
                    label="咨询类型"
                    :label-width="formLabelWidth"
                    prop="pricType"
                  >
                    <el-input
                      v-model="editForm.consultMode"
                      disabled
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="常数（元）"
                    :label-width="formLabelWidth"
                    prop="base"
                  >
                    <el-input
                      v-model="editForm.base"
                      autocomplete="off"
                      placeholder="请输入常数价格"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="交付拨比（%）"
                    :label-width="formLabelWidth"
                    prop="expertCommission"
                  >
                    <el-input
                      v-model="editForm.expertCommission"
                      autocomplete="off"
                      placeholder="请输入百分比"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="商务拨比（%）"
                    :label-width="formLabelWidth"
                    prop="cmCommission"
                  >
                    <el-input
                      v-model="editForm.cmCommission"
                      autocomplete="off"
                      placeholder="请输入百分比"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="分享拨比（%）"
                    :label-width="formLabelWidth"
                    prop="shareCommission"
                  >
                    <el-input
                      v-model="editForm.shareCommission"
                      autocomplete="off"
                      placeholder="请输入百分比"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <div>
                      <el-button size="mini" @click="reset">重设</el-button>
                      <el-button
                        size="mini"
                        :disabled="editForm.consultMode == '' ? true : false"
                        type="primary"
                        @click="comfirmEdit"
                        >确 定</el-button
                      >
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </NewCard>
          </el-col>
        </el-row>
      </div>

      <!-- 修改内容定价 end-->
    </div>
  </main>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";

import ComSelect from "../../../components/comSelect.vue";
import {
  getPriceCommissionListApi,
  getPriceCommissionEditApi,
} from "@/wss/newApi_3-24/financial/priceCommission.js";
import ComTable from "../../../components/comTable.vue";
import ComForm from "../../../components/comForm.vue";
import NewCard from "../../../components/newCard.vue";
import { changeType, changeTypes, getfilterParams } from "@/wss/utils/wss.js";
import ComTabs from "../../../components/ComTabs.vue";
export default {
  components: {
    ComTable,
    ComForm,
    NewCard,
    ComSelect,
    ComTabs,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") return callback(new Error("年龄不能为空"));
      value = Number(value);
      console.log(value);
      if (typeof value == "number") {
        if (value <= 1 && value >= 0) return callback();
      }
      callback(new Error("年龄不能为空"));
    };
    return {
      currentTitile: "内容定价",
      currentType: "content",
      // 标签页 数组
      tabList: [
        {
          label: "内容定价",
          name: "content",
        },
        {
          label: "咨询定价",
          name: "consult",
        },
        {
          label: "项目定价",
          name: "project",
        },
      ],
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "1",
            label: "正常",
          },
          {
            value: "2",
            label: "失败",
          },
        ],
      },
      padding: padding,
      // 标记第一次过滤
      isFirst: true,
      // 查看对话框
      lookDialogVisible: false,
      isFailtrueFilter: false, //是否过滤失败筛选
      // 保存切换失败和正常筛选的数组
      tempFilterArr: [],
      // 类型数组
      typeArr: [],
      dialogVisible: false,
      // 是否再次过滤筛选条件
      isFilter: true,
      // 表格配置
      config: {
        quanxian: "work:crawler:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0, type: "1,3,4,6" },
      // 失败和成功状态
      currentStatus: "1",
      // 运行中的数量
      operation: 0,
      activeName: "first",

      // 没有转换过的数据
      noChangeTableList: [],
      // 表单配置
      comForm: {
        modes: [
          {
            formType: "select",
            mode: "type",
            placeholder: "请选择类型",
            value: "",
            select: [],
          },
        ],
      },

      // 表格数据
      tableList: [],
      // 表格配置
      tableModes: [
        {
          label: "内容类型",
          mode: "type",
          options: [
            {
              l: "法律",
              v: 1,
            },
            {
              l: "头条",
              v: 3,
            },
            {
              l: "问答",
              v: 4,
            },
            {
              l: "超级合同",
              v: 6,
            },
            {
              l: "咨询",
              v: 7,
            },
          ],
        },
        {
          label: "常数（元）",
          mode: "base",
          width: 100,

          showOverflowTooltip: true,
        },
        {
          label: "定价规则",
          mode: "priceRule",
          showOverflowTooltip: true,
          width: 200,
          effectiveStatus: true,
          options: [
            {
              l: "常数",
              v: 1,
            },
            {
              l: "当前时间/上架时间*常数",
              v: 2,
            },
          ],
        },
        {
          label: "交付拨比（%）",
          mode: "expertCommission",
          showOverflowTooltip: true,
        },
        {
          label: "商务拨比（%）",
          mode: "cmCommission",
          showOverflowTooltip: true,
        },
        {
          label: "分享拨比（%）",
          mode: "shareCommission",
        },
        {
          label: "拨比规则",
          mode: "expertRule",
          options: [
            {
              l: "固定额",
              v: 1,
            },
            {
              l: "实付金额*百分比",
              v: 2,
            },
          ],
        },
      ],
      // 修改定价参数
      editForm: {
        type: "",

        base: "",

        expertCommission: "",
        cmCommission: "",
        shareCommission: "",
      },
      //修改内容定价表单判断
      rules: {
        type: [
          {
            required: true,
            message: "请选择定价类型",
            trigger: "string",
            type: "blur",
          },
        ],
        base: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
            type: "string",
          },
        ],
        expertCommission: [
          {
            required: true,
            message: "0-1之间",
            trigger: "blur",
            type: "string",
            validator: validatePass,
          },
        ],
        cmCommission: [
          {
            required: true,
            message: "0-1之间",
            trigger: "blur",
            type: "string",
            validator: validatePass,
          },
        ],

        shareCommission: [
          {
            required: true,
            message: "0-1之间",
            trigger: "blur",
            type: "string",
            validator: validatePass,
          },
        ],
      },
      //修改内容定价 提示框显示状态
      dialogFormVisible: false,

      //修改内容定价 标题宽度
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getPriceCommissionList();
  },

  methods: {
    validatePass(rule, value, callback) {
      if (value == "") return callback(new Error("年龄不能为空"));
      value = Number(value);
      console.log(value);
      if (typeof value == "number") {
        if (value <= 1 && value >= 0) return callback();
      }
      callback(new Error("年龄不能为空"));
    },
    // tab页切换时
    currentSelect({ label, index, name }) {
      switch (name) {
        case "consult":
          this.pageing.type = "7";
          this.tableModes = [
            {
              label: "咨询方式",
              mode: "consultWay",
            },
            {
              label: "专家等级",
              mode: "expertRank",
              width: 100,
              showOverflowTooltip: true,
            },
            {
              label: "问题类别",
              mode: "consultType",
              options: [
                {
                  l: "专利",
                  v: 1,
                },
                {
                  l: "合同",
                  v: 3,
                },
                {
                  l: "用工",
                  v: 4,
                },
                {
                  l: "超级合同",
                  v: 6,
                },
                {
                  l: "咨询",
                  v: 7,
                },
              ],
            },
            {
              label: "常数（元）",
              mode: "base",
              width: 100,
              showOverflowTooltip: true,
            },
            {
              label: "定价规则",
              mode: "priceRule",
              showOverflowTooltip: true,
              width: 200,
              effectiveStatus: true,
              options: [
                {
                  l: "常数",
                  v: 1,
                },
                {
                  l: "当前时间/上架时间*常数",
                  v: 2,
                },
              ],
            },
            {
              label: "交付分成",
              mode: "expertCommission",
              showOverflowTooltip: true,
            },

            {
              label: "分享分成",
              mode: "shareCommission",
            },
            {
              label: "商务拨比（%）",
              mode: "cmCommission",
              showOverflowTooltip: true,
            },
          ];
          (this.rules = {
            type: [
              {
                required: true,
                message: "请选择咨询方式",
                trigger: "string",
                type: "blur",
              },
            ],
            base: [
              {
                required: true,
                message: "不可为空",
                trigger: "blur",
                type: "string",
              },
            ],
            expertCommission: [
              {
                required: true,
                message: "0-1之间",
                trigger: "blur",
                type: "string",
                validator: this.validatePass,
              },
            ],
            cmCommission: [
              {
                required: true,
                message: "0-1之间",
                trigger: "blur",
                type: "string",
                validator: this.validatePass,
              },
            ],

            shareCommission: [
              {
                required: true,
                message: "0-1之间",
                trigger: "blur",
                type: "number",
                validator: this.validatePass,
              },
            ],
          }),
            (this.editForm = {
              consultMode: "",
              base: "",
              expertCommission: "",
              cmCommission: "",
              shareCommission: "",
            });
          break;

        case "content":
          this.pageing.type = "1,3,4,6";
          this.tableModes = [
            {
              label: "内容类型",
              mode: "type",
              options: [
                {
                  l: "法律",
                  v: 1,
                },
                {
                  l: "头条",
                  v: 3,
                },
                {
                  l: "问答",
                  v: 4,
                },
                {
                  l: "超级合同",
                  v: 6,
                },
                {
                  l: "咨询",
                  v: 7,
                },
              ],
            },
            {
              label: "常数（元）",
              mode: "base",
              width: 100,
              showOverflowTooltip: true,
            },
            {
              label: "定价规则",
              mode: "priceRule",
              showOverflowTooltip: true,
              width: 200,
              effectiveStatus: true,
              options: [
                {
                  l: "常数",
                  v: 1,
                },
                {
                  l: "当前时间/上架时间*常数",
                  v: 2,
                },
              ],
            },
            {
              label: "交付拨比（%）",
              mode: "expertCommission",
              showOverflowTooltip: true,
            },
            {
              label: "商务拨比（%）",
              mode: "cmCommission",
              showOverflowTooltip: true,
            },
            {
              label: "分享拨比（%）",
              mode: "shareCommission",
            },
            {
              label: "拨比规则",
              mode: "expertRule",
              options: [
                {
                  l: "固定额",
                  v: 1,
                },
                {
                  l: "实付金额*百分比",
                  v: 2,
                },
              ],
            },
          ];
          this.editForm = {
            type: "",
            base: "",
            expertCommission: "",
            cmCommission: "",
            shareCommission: "",
          };
          this.rules = {
            type: [
              {
                required: true,
                message: "请选择定价类型",
                trigger: "string",
                type: "blur",
              },
            ],
            base: [
              {
                required: true,
                message: "不可为空",
                trigger: "blur",
                type: "string",
              },
            ],
            expertCommission: [
              {
                required: true,
                message: "0-1之间",
                trigger: "blur",
                type: "string",
                validator: this.validatePass,
              },
            ],
            cmCommission: [
              {
                required: true,
                message: "0-1之间",
                trigger: "blur",
                type: "string",
                validator: this.validatePass,
              },
            ],

            shareCommission: [
              {
                required: true,
                message: "0-1之间",
                trigger: "blur",
                type: "string",
                validator: this.validatePass,
              },
            ],
          };
          break;
        case "project":
          // this.pageing.type = "1,3,4,6";

          break;
      }
      this.getPriceCommissionList();
      // console.log(item);
      this.currentType = name;
      // console.log(this.currentType, "是啊");
      this.currentTitile = label;
      // console.log(this.$refs.form);
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    // 重设
    reset() {
      this.editForm = {
        type: "",
        base: "",
        priceRule: "",
        expertCommission: "",
        cmCommission: "",
        shareCommission: "",
      };
      this.pageing = { pageNum: 1, pageSize: 10, total: 0, type: "1,3,4,6" };
    },

    // 修改定价确认
    async comfirmEdit() {
      await this.$refs.form.validate();
      let editForm = this.editForm;
      const currentType = this.currentType;

      if (currentType == "consult") {
        editForm.consultMode = changeTypes(editForm.consultMode);
      } else if (currentType == "content") {
        editForm.type = changeType(editForm.type);
      }

      let { code, msg } = await getPriceCommissionEditApi(editForm);
      if (code != 200) return;
      editForm.type = changeType(editForm.type);
      this.getPriceCommissionList();
      this.$message({
        message: msg,
        type: "success",
      });
    },
    // 表格行被点击了
    RowClickFn(row) {
      // 1法律 3头条 4问答 6超级合同 7咨询
      let changeRow = JSON.parse(JSON.stringify(row));
      // console.log(changeRow.type);
      // if (changeRow.type == 1) {
      //   changeRow.type = "法律";
      // } else if (changeRow.type == 3) {
      //   changeRow.type = "头条";
      // } else if (changeRow.type == 4) {
      //   changeRow.type = "问答";
      // } else if (changeRow.type == 6) {
      //   changeRow.type = "超级合同";
      // } else {
      //   changeRow.type = "咨询";
      // }
      const currentType = this.currentType;

      if (currentType == "consult") {
        changeRow.consultMode = changeTypes(changeRow.consultMode);
      } else if (currentType == "content") {
        changeRow.type = changeType(changeRow.type);
      }

      this.editForm = changeRow;
      console.log(row);
    },
    // 编辑
    edit() {
      this.dialogFormVisible = true;
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageSize = pageNum;
      this.getPriceCommissionList();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getPriceCommissionList();
    },
    getfilterParamsFn(tableList) {
      let s = new Set();
      for (let index = 0; index < tableList.length; index++) {
        s.add(tableList[index].type);
        // const element = tableList[index];
      }
      let arr = Array.from(s, (item) => {
        return {
          type: item,
        };
      });
      return getfilterParams(arr);
    },
    // 获取列表
    async getPriceCommissionList() {
      const _this = this;

      let { code, rows, total } = await getPriceCommissionListApi(
        _this.pageing
      );
      if (code != 200) return;

      let tableList = JSON.parse(JSON.stringify(rows));
      _this.pageing.total = total;
      console.log(_this.isFirst);
      // 找出过滤类型
      if (_this.isFirst) {
        let arr = _this.getfilterParamsFn(tableList);
        _this.comForm.modes.forEach((item) => {
          item.select = arr;
        });
        _this.isFirst = false;
      }

      _this.tableList = tableList;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    inquireFn(paramsArr) {
      console.log(paramsArr);
      let { pageing } = this;
      // 筛选数据
      paramsArr.forEach((item) => {
        for (const key in item) {
          this.pageing[key] = item[key];
        }
      });
      if (pageing.type == "" || !pageing.type) {
        pageing.type = "1,3,4,6";
      }
      pageing.pageNum = 1;
      this.getPriceCommissionList();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  ::v-deep .container .right {
    margin-top: 0px;
  }
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  ::v-deep .el-card {
    border-radius: 0;
    border: 0;
  }
  ::v-deep .el-tabs__nav-scroll {
    overflow: hidden;
    background: #ffffff;

    box-sizing: border-box;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
  }
  ::v-deep .el-tabs__item.is-active,
  ::v-deep .el-tabs__item:hover {
    color: #f97f2a;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}
.content-box {
  display: flex;
  .table {
    flex: 1.8;
  }
  .edit-box {
    flex: 0.5;
  }
}
</style>